<template>
	<view class="box">
		<u-navbar :is-back="true" :border-bottom="false" :title-bold="true"  :custom-back="handleBack">
			<view :class="isIos===1?'active-slot-wrap':isIos===2?'slot-wrap':''" v-if="isIos">
				成为会员
			</view>
		</u-navbar>
		<view class="box-item" v-for="(item,index) in list" :key="index" @click="btnClick(item.vipId)">
			<view class="name">
			    成为{{item.vipName}}
			</view>
			<view class="box-view">
				<view class="box-view-left">购买 ￥{{item.byPrice}}套餐即享{{item.vipName}}权益</view>
				<view class="box-view-right">
					<!-- plus会员 -->
					<view class="box-view-right-lx" v-if="item.vipType == 1">
						<view class="lx-view1">{{item.vipName}}</view>
						<image src="../../static/plushy.png" mode=""></image>
					</view>
					<!-- 代理商 -->
					<view class="box-view-right-lx" v-if="item.vipType == 2">
						<view class="lx-view2">{{item.vipName}}</view>
						<image src="../../static/dls.png" mode=""></image>
					</view>
					<!-- 合伙人 -->
					<view class="box-view-right-lx" v-if="item.vipType == 3">
						<view class="lx-view3">{{item.vipName}}</view>
						<image src="../../static/hhr.png" mode=""></image>
					</view>
					<!-- 股东 -->
					<view class="box-view-right-lx" v-if="item.vipType == 4">
						<view class="lx-view4">{{item.vipName}}</view>
						<image src="../../static/wd_dj.png" mode=""></image>
					</view>
					<view class="box-view-right-btn" >
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				vipId:'',
				isLogin:'',
				isIos:'',
				share:uni.getStorageSync('share')
			}
		},
		onLoad() {
			this.getVipConfigList()
			this.getisLogin()
			if (uni.getSystemInfoSync().osName=='ios') {
				this.isIos = 1
			}
			if (uni.getSystemInfoSync().osName=='android'){
				this.isIos = 2
			}
		},
		methods: {
			//会员列表
			async getVipConfigList(){
				const res = await this.$u.api.getVipConfigList()
				this.list = res.data
			},
			//判断是否登录
			async getisLogin(){
				const res = await this.$u.api.isLogin()
				this.isLogin = res.data
			},
			//会员 详情
			btnClick(vipId){
				const params = 'vipId=' + vipId
				uni.navigateTo({
					url:'/pages/huiyuanxiangqing/huiyuanxiangqing?' + params
				})
			 //    if (this.isLogin) {
			 //    	this.vipId = vipId
			 //    	this.$u.throttle(this.getbyVip, 1000)
			 //    }else{
				// 	this.$u.toast('请先登录')
				// 	setTimeout(v=>{
				// 		uni.setStorageSync('back_url','pages/chengweihuiyuan/chengweihuiyuan')
				// 		uni.navigateTo({
				// 			url:'/pages/login/login'
				// 		})
				// 	},1000)
				// }
				
			},
			async getbyVip(){
				const params = {
					vipId:this.vipId
				}
				const res = await this.$u.api.byVip(params)
				uni.requestPayment({
					provider: 'wxpay',    //支付类型-固定值
					timeStamp: res.data.wxPayInfo.timeStamp, // 时间戳（单位：秒）
					nonceStr: res.data.wxPayInfo.nonceStr, // 随机字符串
					package: res.data.wxPayInfo.packageValue, // 固定值
					signType: res.data.wxPayInfo.signType, //固定值
					paySign: res.data.wxPayInfo.paySign, //签名
					appId:res.data.wxPayInfo.appId,
					success: (res1)=> {
						console.log('我支付成功了')
						uni.showToast({
							icon: 'success',
							title: '支付成功'
						})
						// uni.requestSubscribeMessage({
						// 	tmplIds: ['hFFHbw5eYfjco3Zzlq0ube3IELTOl5MM6txLqQJ3ll8'],
						// 	complete: (res) => {
						// 		console.log(res,'999');
							
						// 	}
						// })
					},
					
					fail: (err)=> {
						uni.showToast({
							icon: 'none',
							title: '支付失败'
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/dingdanxiangqing/dingdanxiangqing?' + param
							})
						},1000)
					}
				});	
			},
			//返回上一页
			handleBack(){
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];  // 获取上一个页面对象
				const prevPageRoute = prevPage.route;  // 获取上一个页面的路由
				console.log(prevPageRoute)
				if (prevPageRoute == 'pages/login/login') {
					uni.switchTab({
						url:'/pages/index/index'
					})
				} else{
					uni.navigateBack({
						
					})
				}
				
			},
		},
		onUnload() {
			const pages = getCurrentPages();
			const prevPage = pages[pages.length - 2];  // 获取上一个页面对象
			const prevPageRoute = prevPage.route;  // 获取上一个页面的路由
			if (prevPageRoute == 'pages/login/login') {
				uni.switchTab({
					url:'/pages/index/index'
				})
			} else{
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.slot-wrap {
		font-size: 29rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 29rpx;
	}
	.active-slot-wrap{
		padding-left: 234rpx;;
		font-size: 29rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 29rpx;
	}
    .box{
		padding: 36rpx 28rpx;
	}
	.box-item{
		width: 684rpx;
		height: 290rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919921771368562.png') no-repeat;
		background-size: 100% 100%;
		margin-bottom: 28rpx;
	}
	.name{
		padding-top: 10rpx;
		font-size: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #010000;
		line-height: 50rpx;
		background: linear-gradient(-23deg, #C09ADE 13.4033203125%, #91A3FF 99.6826171875%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: center;
	}
	.box-view{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 36rpx 24rpx;
	}
	.box-view-left{
		font-size: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 74rpx;
		text-shadow: 3px 2px 3px #D8B9FF;
		width: 420rpx;
	}
	.box-view-right{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.box-view-right-lx{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.lx-view1{
		width: 140rpx;
		height: 36rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #BD5A1C;
		line-height: 32rpx;
		text-align: center;
		text-shadow: 0px -1px 1px rgba(94,94,94,0.35);
		border-radius: 38rpx 0rpx 0rpx 38rpx;
		border-bottom: 1rpx solid #BD5A1C;
		border-top: 1rpx solid #BD5A1C;
		border-left: 1rpx solid #BD5A1C;
		margin-right: -20rpx;
		background: #ffffff;
	}
	.lx-view2{
		width: 140rpx;
		height: 36rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #2763D5;
		line-height: 32rpx;
		text-align: center;
		text-shadow: 0px -1px 1px rgba(94,94,94,0.35);
		border-radius: 38rpx 0rpx 0rpx 38rpx;
		border-bottom: 1rpx solid #2763D5;
		border-top: 1rpx solid #2763D5;
		border-left: 1rpx solid #2763D5;
		margin-right: -20rpx;
		background: #ffffff;
	}
	.lx-view3{
		width: 140rpx;
		height: 36rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #A95FE4;
		line-height: 32rpx;
		text-align: center;
		text-shadow: 0px -1px 1px rgba(94,94,94,0.35);
		border-radius: 38rpx 0rpx 0rpx 38rpx;
		border-bottom: 1rpx solid #A95FE4;
		border-top: 1rpx solid #A95FE4;
		border-left: 1rpx solid #A95FE4;
		margin-right: -20rpx;
		background: #ffffff;
	}
	.lx-view4{
		width: 140rpx;
		height: 36rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #9422CB;
		line-height: 32rpx;
		text-align: center;
		text-shadow: 0px -1px 1px rgba(94,94,94,0.35);
		border-radius: 38rpx 0rpx 0rpx 38rpx;
		border-bottom: 1rpx solid #9422CB;
		border-top: 1rpx solid #9422CB;
		border-left: 1rpx solid #9422CB;
		margin-right: -20rpx;
		background: #ffffff;
	}
	.box-view-right-lx image{
		width: 94rpx;
		height: 94rpx;
	}
	.box-view-right-btn{
		margin-top: 20rpx;
		width: 180rpx;
		height: 60rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919917879024304.png') no-repeat;
		background-size: 100% 100%;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #8E1DE5;
		line-height: 60rpx;
		text-shadow: 3px 2px 3px #D8B9FF;
		text-align: center;
	}
</style>
